<template>
  <div class="feedback-page">
    <a-page-header title="反馈处理" sub-title="处理用户反馈和建议" />
    
    <a-card class="card-shadow">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :expandable="{ expandedRowRender }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'priority'">
            <a-tag :color="getPriorityColor(record.priority)">
              {{ getPriorityText(record.priority) }}
            </a-tag>
          </template>
          
          <template v-else-if="column.key === 'status'">
            <a-tag :color="record.status === 'RESOLVED' ? 'green' : 'orange'">
              {{ record.status === 'RESOLVED' ? '已处理' : '待处理' }}
            </a-tag>
          </template>
          
          <template v-else-if="column.key === 'action'">
            <a-button type="link" size="small" @click="handleReply(record)">
              回复
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    
    <!-- 回复弹窗 -->
    <a-modal
      v-model:open="replyModalVisible"
      title="回复反馈"
      @ok="handleReplySubmit"
    >
      <a-textarea
        v-model:value="replyContent"
        placeholder="请输入回复内容"
        :rows="6"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { ref, h } from 'vue'
import { message } from 'ant-design-vue'

const loading = ref(false)
const replyModalVisible = ref(false)
const replyContent = ref('')

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: '标题', dataIndex: 'title', key: 'title' },
  { title: '用户', dataIndex: 'username', key: 'username' },
  { title: '优先级', key: 'priority' },
  { title: '状态', key: 'status' },
  { title: '提交时间', dataIndex: 'createdAt', key: 'createdAt' },
  { title: '操作', key: 'action', width: 100 }
]

const dataSource = ref([
  {
    id: 1,
    title: '订单退款问题',
    username: '张三',
    content: '申请退款后，钱款迟迟未到账',
    priority: 'high',
    status: 'PENDING',
    createdAt: '2024-01-15 10:30:00'
  }
])

const expandedRowRender = (record) => {
  return h('div', { style: { padding: '16px', backgroundColor: '#fafafa' } }, [
    h('p', { style: { margin: 0 } }, `内容：${record.content}`)
  ])
}

const getPriorityColor = (priority) => {
  return priority === 'high' ? 'red' : priority === 'normal' ? 'blue' : 'default'
}

const getPriorityText = (priority) => {
  return priority === 'high' ? '高' : priority === 'normal' ? '中' : '低'
}

const handleReply = (record) => {
  replyModalVisible.value = true
}

const handleReplySubmit = () => {
  message.success('回复成功')
  replyModalVisible.value = false
  replyContent.value = ''
}
</script>

